<template>
<label class="input w-full">
    <font-awesome-icon v-if="random" @click="randomVal" icon="random"></font-awesome-icon>
    <font-awesome-icon v-else-if="icon" :icon="icon"></font-awesome-icon>
    <input
        v-model="password"
        :type="type"
        required
        :placeholder="_placeholder"
        :disabled="disabled"
    />
    <label class="label">
       <font-awesome-icon v-if="type!='password'" icon="eye" @click="toggle"></font-awesome-icon>
       <font-awesome-icon v-else icon="eye-slash" @click="toggle"></font-awesome-icon>
    </label>
    
</label>
</template>

<script>
export default {
    name: "passwordEdit",
    props:{
        placeholder:{
            type:[String,Function],
            default: function () {
                return 'Please enter';
            }
        },
        value:{
            default:function () {
                return '';
            }
        },
        disabled:{
            default: function () {
                return false;
            }
        },
        //随机生成密码
        random:{
            default: function () {
                return false;
            }
        },
        mouseenterShow:{
            default: function () {
                return false;
            }
        },
        icon:{
            default: function () {
                return '';
            }
        },
        modelValue:{
            default: function () {
                return undefined;
            }
        }
    },
    emits: ['update:value','update:modelValue'],
    data(){
        return {
            password:typeof this.modelValue=='undefined'?this.value:this.modelValue,
            type:'password',
            init_click:false
        };
    },
    watch:{
        value(val){
            if(this.password!=val){
                this.password = val;
            }
        },
        password(val){
            if(this.value!=val){
                this.$emit('update:value', val);
                this.$emit('update:modelValue', val);
            }
        },
        modelValue(val,old){              
            if(JSON.stringify(val)!=JSON.stringify(this.password)){
                this.password = val;
            }
        },
    },
    methods:{
        show(){
            if(this.mouseenterShow){
                this.init_click = false;
                this.type = 'text';
            }
        },
        hide(){
            if(this.mouseenterShow && !this.init_click){
                this.type = 'password';
            }
        },
        toggle(){
            this.init_click = true;
            this.type = this.type=='password'?'text':'password';
        },
        randomPass(len = 16, mode = "high"){
            const lowerCaseArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',];
            const blockLetterArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
            const numberArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
            const specialArr = ['!', '@', '-', '_', '=', '<', '>', '#', '*', '%', '+', '&', '^', '$'];
            const passArr = [];
            let password = '';

            //指定参数随机获取一个字符
            const specifyRandom = function (...arr) {
                let str = "";
                arr.forEach(item => {
                    str += item[Math.floor(Math.random() * item.length)]
                });
                return str;
            }

            switch (mode) {
                case "high":
                    //安全最高的
                    password += specifyRandom(lowerCaseArr, blockLetterArr, numberArr, specialArr);
                    passArr.push(...lowerCaseArr, ...blockLetterArr, ...numberArr, ...specialArr);
                    break;
                case "medium":
                    //中等的
                    password += specifyRandom(lowerCaseArr, blockLetterArr, numberArr);
                    passArr.push(...lowerCaseArr, ...blockLetterArr, ...numberArr);
                    break;
                //低等的
                case "low":
                    password += specifyRandom(lowerCaseArr, numberArr);
                    passArr.push(...lowerCaseArr, ...numberArr);
                    break;
                default:
                    password += specifyRandom(lowerCaseArr, numberArr);
                    passArr.push(...lowerCaseArr, ...numberArr);
            }

            const forLen = len - password.length;
            for (let i = 0; i < forLen; i++) {
                password += specifyRandom(passArr);
            }

            return password;
        },
        randomVal(){
            this.password = this.randomPass(6,'low');
            this.type = 'text';
        }
    },
    computed:{
        _placeholder(){
            if(typeof this.placeholder=="function"){
                return this.placeholder();
            }
            return this.$t(this.placeholder);
        }
    }
}
</script>

<style scoped>

</style>
